<template>

     <div>

       <div v-if="form.iseg==0">
         <div style="overflow-y:scroll;overflow-x:hidden;height:150%">
           <h5 style="color: crimson">添加分散式房源</h5>
           <!--房源-->
           <el-form ref="forms" :model="forms" label-width="80px"></el-form>

           <!--房屋信息-->
           <el-form ref="form" :model="form" label-width="80px" style="width: 750px;height: 60px;" >
             <el-row :gutter="150">
               <el-col :span="10"><div class="grid-content bg-purple">
                 <el-form-item label="*楼盘名称" style="width: 250px;">
                   <el-input v-model="form.premisesId"></el-input>
                   &nbsp;&nbsp;
                   <el-button type="warning" @click="getlp">添加楼盘</el-button>
                 </el-form-item>
               </div></el-col>
               <el-col :span="7"><div class="grid-content bg-purple">
                 <el-form-item label="出租类型">
                   <el-radio v-model="form.reserve1" label="0" @change="zhengzu(0)">整租</el-radio>
                   <el-radio v-model="form.reserve1" label="1" @change="zhengzu(1)">合租</el-radio>
                 </el-form-item>

               </div></el-col>

               <el-col :span="7"><div class="grid-content bg-purple">
                 <el-form-item label="出租状态">
                   <el-radio v-model="form.status" label=1>已出租</el-radio>
                   <el-radio v-model="form.status" label=0>未出租</el-radio>
                 </el-form-item>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="楼栋号" style="width: 160px;">
                   <el-input v-model="form.buildingNo"></el-input>
                 </el-form-item>
               </div></el-col>

               <el-col :span="7"><div class="grid-content bg-purple">
                 <el-form-item label="单元号" style="width: 200px;">
                   <el-input v-model="form.unitNo"></el-input>
                 </el-form-item>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="门牌号" style="width: 200px;">
                   <el-input v-model="form.roomNo"></el-input>
                 </el-form-item>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*户型" style="width: 150px;">
                   <el-select v-model="form.room" placeholder="室">
                     <el-option value="1">1</el-option>
                     <el-option value="2">2</el-option>
                     <el-option value="3">3</el-option>
                     <el-option value="4">4</el-option>
                     <el-option value="5">5</el-option>
                     <el-option value="6">6</el-option>
                     <el-option value="7">7</el-option>
                     <el-option value="8">8</el-option>
                     <el-option value="9">9</el-option>
                   </el-select>
                 </el-form-item>
               </div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-select v-model="form.hall" placeholder="厅">
                   <el-option value="0">0</el-option>
                   <el-option value="1">1</el-option>
                   <el-option value="2">2</el-option>
                 </el-select>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*装修情况" style="width: 180px;">
                   <el-select v-model="form.decorate">
                     <el-option value="0">0</el-option>
                     <el-option value="1">1</el-option>
                     <el-option value="2">2</el-option>
                   </el-select>
                 </el-form-item>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*设置管家" style="width: 180px;">
                   <el-select v-model="form.manager">
                     <el-option
                       v-for="item in options"
                       :key="item.userid"
                       :label="item.username"
                       :value="item.userid">
                     </el-option>
                   </el-select>
                 </el-form-item>
               </div></el-col>


               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*房产面积" style="width: 150px;">
                   <el-input v-model="form.proportion"></el-input>
                 </el-form-item>
               </div></el-col>

                <el-col :span="6"><div class="grid-content bg-purple">
                  <el-form-item label="*租金" style="width: 150px;">
                    <el-input v-model="forms.rental"></el-input>
                  </el-form-item>
                </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*付款方式" style="width: 150px;">
                   <el-select v-model="form.paymentMortgage" placeholder="押">
                     <el-option value="1">1</el-option>
                     <el-option value="2">2</el-option>
                     <el-option value="3">3</el-option>
                   </el-select>
                 </el-form-item>
               </div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-select v-model="form.paymentPay" placeholder="付" style="width: 80px;">
                   <el-option value="1">1</el-option>
                   <el-option value="2">2</el-option>
                   <el-option value="3">3</el-option>
                   <el-option value="4">4</el-option>
                   <el-option value="5">5</el-option>
                   <el-option value="6">6</el-option>
                 </el-select>
               </div></el-col>
             </el-row>

             <el-form-item label="*公共配套">
               <el-checkbox-group v-model="form.publiclists">
                 <el-checkbox v-for="(m,ggid) in publiclist" :label="m.ggid" :key="ggid">{{m.ggname}}</el-checkbox>
               </el-checkbox-group>
             </el-form-item>

               <el-form-item label="*房间配套">
                 <el-checkbox-group v-model="forms.privatelists">
                   <el-checkbox v-for="(m,fjid) in privatelist" :label="m.fjid" :key="fjid">{{m.fjname}}</el-checkbox>
                 </el-checkbox-group>
               </el-form-item>

             <el-row :gutter="50">
               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="房间区域图片" style="width: 200px;">
                   <el-upload
                     class="avatar-uploader"
                     action="http://localhost:9202/tbHouseInfo/upload"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess2"
                     :before-upload="beforeAvatarUpload2">
                     <img v-if="imageUrl" :src="imageUrl" class="avatar">
                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                   </el-upload>
                 </el-form-item>
                </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="公共区域图片" style="width: 200px;">
                   <el-upload
                     class="avatar-uploader"
                     action="http://localhost:9202/tbHouseInfo/upload"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
                     <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                   </el-upload>
                 </el-form-item>
               </div></el-col>
             </el-row>

             <el-form-item label="*房源介绍">
               <el-input
                 type="textarea"
                 :rows="2"
                 placeholder="请输入内容"
                 v-model="form.introduce">
               </el-input>

             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="onSubmit">添加</el-button>
               <el-button @click="">返回</el-button>
             </el-form-item>
           </el-form>
         </div>

         <!--整租-->
       </div>


       <!--合租-->
       <div v-if="form.iseg==1">
         <div style="overflow-y:scroll;overflow-x:hidden;height:150%">
           <h5 style="color: crimson">添加分散式房源</h5>
           <!--房源-->
           <el-form ref="forms" :model="forms" label-width="80px"></el-form>

           <!--房屋信息-->
           <el-form ref="form" :model="form" label-width="80px" style="width: 750px;height: 60px;" >
             <el-row :gutter="150">
               <el-col :span="10"><div class="grid-content bg-purple">
                 <el-form-item label="*楼盘名称" style="width: 250px;">
                   <el-input v-model="form.premisesId"></el-input>
                   &nbsp;&nbsp;
                   <el-button type="warning" @click="getlp">添加楼盘</el-button>
                 </el-form-item>
               </div></el-col>
               <el-col :span="7"><div class="grid-content bg-purple">
                 <el-form-item label="出租类型">
                   <el-radio v-model="form.reserve1" label="0" @change="zhengzu(0)">整租</el-radio>
                   <el-radio v-model="form.reserve1" label="1" @change="zhengzu(1)">合租</el-radio>
                 </el-form-item>
               </div></el-col>

               <el-col :span="7"><div class="grid-content bg-purple">
                 <el-form-item label="出租状态">
                   <el-radio v-model="form.status" label=1>已出租</el-radio>
                   <el-radio v-model="form.status" label=0>未出租</el-radio>
                 </el-form-item>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="楼栋号" style="width: 160px;">
                   <el-input v-model="form.buildingNo"></el-input>
                 </el-form-item>
               </div></el-col>

               <el-col :span="7"><div class="grid-content bg-purple">
                 <el-form-item label="单元号" style="width: 200px;">
                   <el-input v-model="form.unitNo"></el-input>
                 </el-form-item>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="门牌号" style="width: 200px;">
                   <el-input v-model="form.roomNo"></el-input>
                 </el-form-item>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*户型" style="width: 150px;">
                   <el-select v-model="form.room" placeholder="室">
                     <el-option value="1">1</el-option>
                     <el-option value="2">2</el-option>
                     <el-option value="3">3</el-option>
                     <el-option value="4">4</el-option>
                     <el-option value="5">5</el-option>
                     <el-option value="6">6</el-option>
                     <el-option value="7">7</el-option>
                     <el-option value="8">8</el-option>
                     <el-option value="9">9</el-option>
                   </el-select>
                 </el-form-item>
               </div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-select v-model="form.hall" placeholder="厅">
                   <el-option value="0">0</el-option>
                   <el-option value="1">1</el-option>
                   <el-option value="2">2</el-option>
                 </el-select>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*装修情况">
                   <el-select v-model="form.decorate">
                     <el-option value="0">0</el-option>
                     <el-option value="1">1</el-option>
                     <el-option value="2">2</el-option>
                   </el-select>
                 </el-form-item>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*设置管家" style="width: 180px;">
                   <el-select v-model="form.manager">
                     <el-option
                       v-for="item in options"
                       :key="item.userid"
                       :label="item.username"
                       :value="item.userid">
                     </el-option>
                   </el-select>
                 </el-form-item>
               </div></el-col>


               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*房产面积" style="width: 150px;">
                   <el-input v-model="form.proportion"></el-input>
                 </el-form-item>
               </div></el-col>

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="*付款方式" style="width: 150px;">
                   <el-select v-model="form.paymentMortgage" placeholder="押">
                     <el-option value="1">1</el-option>
                     <el-option value="2">2</el-option>
                     <el-option value="3">3</el-option>
                   </el-select>
                 </el-form-item>
               </div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-select v-model="form.paymentPay" placeholder="付" style="width: 80px;">
                   <el-option value="1">1</el-option>
                   <el-option value="2">2</el-option>
                   <el-option value="3">3</el-option>
                   <el-option value="4">4</el-option>
                   <el-option value="5">5</el-option>
                   <el-option value="6">6</el-option>
                 </el-select>
               </div></el-col>
             </el-row>

             <el-form-item label="*公共配套">
               <el-checkbox-group v-model="form.publiclists">
                 <el-checkbox v-for="(m,ggid) in publiclist" :label="m.ggid" :key="ggid">{{m.ggname}}</el-checkbox>
               </el-checkbox-group>
             </el-form-item>


             <el-row :gutter="50">

               <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="公共区域图片" style="width: 200px;">
                   <el-upload
                     class="avatar-uploader"
                     action="http://localhost:9202/tbHouseInfo/upload"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
                     <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                   </el-upload>
                 </el-form-item>
               </div></el-col>
             </el-row>

             <el-form-item label="*房源介绍">
               <el-input
                 type="textarea"
                 :rows="2"
                 placeholder="请输入内容"
                 v-model="form.introduce">
               </el-input>
             </el-form-item>
             <el-button type="primary" plain @click="addroom">*添加房间</el-button>

             <el-dialog title="添加" :visible.sync="dialogFormVisible">
               <el-form :model="roomform">
                 <el-form-item label="*房源编号" :label-width="formLabelWidth">
                   <el-input v-model="roomform.roomCode" autocomplete="off"></el-input>
                 </el-form-item>
                 <el-form-item label="*装修风格" :label-width="formLabelWidth">
                   <el-input v-model="roomform.decorateStyle" autocomplete="off"></el-input>
                 </el-form-item>
                 <el-form-item label="*面积" :label-width="formLabelWidth">
                   <el-input v-model="roomform.proportion" autocomplete="off"></el-input>
                 </el-form-item>
                 <el-form-item label="*朝向" :label-width="formLabelWidth">
                   <el-select v-model="roomform.region" placeholder="请选择朝向">
                     <el-option value="2">南</el-option>
                     <el-option value="4">北</el-option>
                     <el-option value="5">东南</el-option>
                     <el-option value="7">西南</el-option>
                     <el-option value="1">东</el-option>
                     <el-option value="3">西</el-option>
                     <el-option value="6">东北</el-option>
                     <el-option value="6">西北</el-option>
                   </el-select>
                 </el-form-item>
               </el-form>
               <el-form-item label="*房间配套">
                 <el-checkbox-group v-model="forms.privatelists">
                   <el-checkbox v-for="(m,fjid) in privatelist" :label="m.fjid" :key="fjid">{{m.fjname}}</el-checkbox>
                 </el-checkbox-group>
               </el-form-item>
               <el-form-item label="*租金" :label-width="formLabelWidth">
                 <el-input v-model="roomform.rental" autocomplete="off"></el-input>元/月
               </el-form-item>

               <el-form-item label="房间区域图片" style="width: 200px;">
                 <el-upload
                   class="avatar-uploader"
                   action="http://localhost:9202/tbHouseInfo/upload"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess2"
                   :before-upload="beforeAvatarUpload2">
                   <img v-if="imageUrl" :src="imageUrl" class="avatar">
                   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
               </el-form-item>

               <el-avatar :size="10" :src="url"></el-avatar>

               <div slot="footer" class="dialog-footer">
                 <el-button @click="dialogFormVisible = false">取 消</el-button>
                 <el-button type="primary" @click="addrooms">确 定</el-button>
               </div>
             </el-dialog>

             <el-form-item>
               <el-button type="primary" @click="onSubmit">添加</el-button>
               <el-button @click="">返回</el-button>
             </el-form-item>
           </el-form>
         </div>
       </div>
     </div>
</template>

<script>
import {saveHouseRoom,publiclist,privatelist,getlist,list,addroom} from "@/api/weishu/fensan/index";

export default {
  data(){
    return{
      form:{
        reserve1:"0",
        iseg:"",
        publiclists:[],
        premisesId:"",
        buildingNo:"",
        unitNo:"",
        roomNo:"",
        room:"",
        hall:"",
        proportion:"",
        decorate:"",
        paymentMortgage:"",
        paymentPay:"",
        manager:"",
        publicFacility:"",
        introduce:"",
        status:"",
        reserve5:"",
      },
      forms:{
        privatelists:[],
        frontCover:"",
        rental:"",
        privateFacility:"",
      },
      //图片上传
      imageUrl:"",
      imageUrl2:"",
      //公共配套
      publiclist:[],
      //房间配套
      privatelist:[],
      //系统管家
      options:[],
      //添加房间
      roomform:{},
      //打开添加框
      dialogFormVisible:false,
      formLabelWidth: '120px',
      //图片显示
      url:""

    }
  },

  methods:{
    //去添加
    onSubmit(){
      //添加
      saveHouseRoom(this.form,this.forms).then(resp=>{
           if (resp){
             this.$message.success("添加成功")
             this.$router.push({path:'/weishu/weishu/zukehetong/index'})
           }else{
             this.$message.error("添加失败")
           }
      })
    },
    //调到添加楼盘添加
    getlp(){
      this.$router.push({path:'/weishu/index/weishu/shu/index'})
    },
    //查询
    select(){
        list().then(resp=>{
            this.url=resp.url
        })
    },
    //添加房间
    addroom(){
       this.dialogFormVisible=true;
       this.roomform={};
    },
    //添加
    addrooms(){
       addroom(this.roomform).then(resp=>{
            this.dialogFormVisible=false
            if (resp){
              this.$message.success("添加成功")
              this.select();
            }else{
              this.$message.error("添加失败")
            }
       })
    },
    zhengzu(val){
      this.form.iseg=val;
    },
    //查询管家
    userlist(){
        getlist().then(resp=>{
           this.options=resp;
          // console.log(resp)
        })
    },
    //查询公共配套
    publicselect(){
       publiclist().then(resp=>{
          this.publiclist=resp
       })
    },
    //查询房间配套
    privateselect(){
      privatelist().then(resp=>{
        this.privatelist=resp
      })
    },
    //图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl2 = URL.createObjectURL(file.raw);
      this.form.reserve5=res[0].fileUrl
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //图片上传
    handleAvatarSuccess2(res, file) {
      this.imageUrl  = URL.createObjectURL(file.raw);
      this.forms.frontCover=res[0].fileUrl
      this.roomform.frontCover=res[0].fileUrl
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  created() {
    this.publicselect();
    this.privateselect();
    this.userlist();
    //查询房源信息
    this.select();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #001528;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: dodgerblue;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
